<template>
	<div class="header">
		
		<div class="bgImg" v-if="finaImg">
			<img :src="finaImg" class="img" />
		</div>
		<div class="navigationList">
			<div class="item" v-for="item in listNav" :key="item.icon" @click="$router.push(item.clickName)">
				<svg-load :name="item.icon" class="itemImg"></svg-load>
				<div class="itemName">{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		_t18
	} from '@/utils/public'
	import {
		publiceNotice
	} from '@/api/common/index'
	// 增值收益 会员专区 普通产品 我的投资
	const listNav = computed(() => {
		return [{
				icon: 'zhenzhi',
				name: _t18(`value_added _income`),
				clickName: '/addIncome'
			},
			{
				icon: 'huiyuan',
				name: _t18(`members_only`),
				clickName: '/membersOnly'
			},
			{
				icon: 'putong',
				name: _t18(`normal_product`),
				clickName: '/generalMerchandise'
			},
			{
				icon: 'touzhi',
				name: _t18(`my_invest`),
				clickName: '/myInvestment'
			}
		]
	})
	const finaImg = ref('')
	onMounted(async () => {
		try {
			const res = await publiceNotice('ACTIVITY_NOTICE', 'FINANCE_ACTIVITY ')
			if (res.code === 200) {
				finaImg.value = res.data[0].imgUrl
			}
		} catch (error) {}
	})
</script>
<style lang="scss" scoped>
	.header {
		display: block;
		border-top: 1px solid var(--ex-border-color);
		border-bottom: 1px solid var(--ex-border-color);
		padding: 20px 0;

		.bgImg {
			margin: 0 15px;
			height: 173px;

			.img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.navigationList {
			padding: 19px 15px 0;
			display: flex;
			justify-content: space-between;

			.item {
				flex: 1;
				text-align: center;
				align-items: center;
				font-size: 12px;
				color: var(--ex-default-font-color);
				justify-content: center;
				padding: 0 5px;

				.itemImg {
					width: 40px;
					height: 40px;
					margin-bottom: 10px;
				}

				.itemName {
					// width: 52px;
					text-align: center;
					word-wrap: break-word;
				}
			}
		}
	}
</style>